<template>
  <el-upload
    ref="uploadImageRef"
    v-model:file-list="fileList"
    :action="action"
    :headers="headers"
    :limit="props.limit"
    :list-type="props.listType"
    :on-preview="handlePictureCardPreview"
    :before-upload="beforeUpload"
    :on-success="handleSuccess"
    :on-remove="handleRemove"
  >
    <el-icon><Plus /></el-icon>
  </el-upload>
  <el-dialog v-model="imageZoomVisible" :fullscreen="true">
    <img :src="dialogImageUrl" alt="" />
  </el-dialog>
</template>
<script lang="ts" setup>
import { ref, defineProps, defineEmits, watchEffect } from "vue";
import {
  type UploadInstance,
  type UploadProps,
  type UploadUserFile,
  ElMessageBox,
} from "element-plus";
import { useI18n } from "vue-i18n";
import { fileApi } from "@/api/file/index";

const { t } = useI18n();
// 上传文件的地址
const action = ref(fileApi.uploadUrl());
// 请求上传的头部
const headers = ref(fileApi.authHeader());
const fileList = ref<UploadUserFile[]>([] as any);
const uploadImageRef = ref<UploadInstance>();
// 图片放大
const imageZoomVisible = ref<boolean>(false);
const dialogImageUrl = ref<string>("");

// 传参
const props = defineProps({
  listType: {
    type: String as () => "text" | "picture" | "picture-card",
    default: "picture",
  },
  limit: {
    type: Number,
    default: 1000,
  },
  pictureUrl: {
    type: Array,
    default: () => [],
  },
  // 宽
  width: {
    type: Number,
    default: 80,
  },
  // 高
  height: {
    type: Number,
    default: 80,
  },
  // 类型
  type: {
    type: String,
    default: "resize",
  },
});
fileList.value = props.pictureUrl as UploadUserFile[];
const emits = defineEmits(["filesResponse", "uploadFileList"]);
// 图片预览
const handlePictureCardPreview: UploadProps["onPreview"] = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url!;
  imageZoomVisible.value = true;
};

// 图片上传之前
const beforeUpload: UploadProps["beforeUpload"] = (file) => {
  // 图片最大限制
  const isLt2M = (file!.size as number) / 1024 / 1024 < 2;
  const imageTypes = ["image/jpeg", "image/png", "image/gif", "image/jpg"];
  const isImageTypes = imageTypes.includes(file!.type);
  if (isImageTypes && !isLt2M) {
    ElMessageBox.confirm(
      t("unionFiles.imageLtRequired"),
      t("unionFiles.warning"),
      {
        confirmButtonText: t("common.confirm"),
        cancelButtonText: t("common.cancel"),
        type: "warning",
      },
    )
      .then(async () => {})
      .catch(() => {
        fileList.value.splice(-1, 1); // 移除当前超出大小的文件
        return false;
      });
  }
};

// 文件上传成功
const handleSuccess: UploadProps["onSuccess"] = (uploadFiles) => {
  if (!Array.isArray(uploadFiles)) {
    uploadFiles = [uploadFiles];
  }
  uploadFiles = [...fileList.value, ...uploadFiles];
  emits("uploadFileList", uploadFiles);
};

// 删除文件
const handleRemove: UploadProps["onRemove"] = (uploadFile) => {
  fileList.value = fileList.value.filter((item) => item.url !== uploadFile.url);
  emits("uploadFileList", fileList.value);
};

watchEffect(() => {
  fileList.value = props.pictureUrl as UploadUserFile[];
  if (fileList.value.length > 0) {
    fileList.value?.forEach((item: any) => {
      item.url = fileApi.imageUrl(
        item.fileSrc,
        props.width,
        props.height,
        props.type,
      );
    });
  }
});
</script>
<style lang="scss" scoped>
:deep(.el-upload--picture-card) {
  width: 80px;
  height: 80px;
  border-radius: 0;
}

:deep(.el-upload-list--picture-card .el-upload-list__item) {
  width: 80px;
  height: 80px;
}
</style>
